<%-- 
    Document   : Doctor
    Created on : 8 ??.?. 2554, 17:26:19
    Author     : SUNTIPARB
--%>
<%-- Form Function --%>
<script type="text/javascript">
    // pre-submit callback
    function showRequest(formData, jqForm, options) {
        //        var queryString = $.param(formData);
        //        alert('About to submit: \n\n' + queryString);
        //        return true;
    }

    // post-submit callback
    function showResponse(responseText, statusText, xhr, $form)  {
        $("#showDoctor_1").html("");
        $("#showDoctor_2").html("");
        $("#showDoctor_3").html("");
        $.each(responseText, function(i, j){
            var num = (i%3)+1;//get id for showDoctor (1,2 or 3)
            $("<div/>").attr({"class":"box1 p1","id":"box1_"+i}).appendTo("#showDoctor_"+num);
            $("<div/>").attr({"class":"indent-box1","id":"indent-box1_"+i}).appendTo("#showDoctor_"+num+" #box1_"+i);
            $("<table/>").attr({"id":"tblDoctor_"+i}).appendTo("#showDoctor_"+num+" #indent-box1_"+i);
            $("<tr/>").attr({"class":"","id":"trDoctor_"+i}).appendTo("#showDoctor_"+num+" #tblDoctor_"+i);
            $("<td/>").attr({"class":"","id":"tdDoctor-img_"+i}).appendTo("#showDoctor_"+num+" #trDoctor_"+i);
            $("<a/>").attr({"class":"lightbox-image","href":"<%=request.getContextPath()%>/images/doctor/"+j.id+".jpg","rel":"prettyphoto[doctorSearch]","title":j.name + " " + j.surname}).appendTo("#showDoctor_"+num+" #tdDoctor-img_"+i);
            $("<img/>").attr("src","<%=request.getContextPath()%>/images/doctor/thumb/"+j.id+".jpg").appendTo("#showDoctor_"+num+" #tdDoctor-img_"+i+" a");
            $("<td/>").attr({"class":"","id":"tdDoctor-dtl_"+i}).css({"padding":"10px 0 0 15px"}).appendTo("#showDoctor_"+num+" #trDoctor_"+i);
            $("<em/>").text(j.name+" "+j.surname).appendTo("#showDoctor_"+num+" #tdDoctor-dtl_"+i);
            $("<p/>").text(j.code).appendTo("#showDoctor_"+num+" #tdDoctor-dtl_"+i);
            $("<a/>").attr({"class":"button2"}).text("More").appendTo("#showDoctor_"+num+" #tdDoctor-dtl_"+i);
        });
        $("a[rel^='prettyphoto']").prettyPhoto({theme:'facebook'});
    }
    (function($) {
        $.fn.getDoctor = function(){
            $.ajax({
                type: 'POST',
                url: '<%=request.getContextPath()%>/Public/Doctor/getDoctor',
                //              data: "{}",
                //              contentType: "text/json; charset=utf-8",
                dataType: 'json',
                success: function(data){
                    $.each(data, function(i, j){
                        var num = (i%3)+1;//get id for showDoctor (1,2 or 3)
                        $("<div/>").attr({"class":"box1 p1","id":"box1_"+i}).appendTo("#showDoctor_"+num);
                        $("<div/>").attr({"class":"indent-box1","id":"indent-box1_"+i}).appendTo("#showDoctor_"+num+" #box1_"+i);
                        $("<table/>").attr({"id":"tblDoctor_"+i}).appendTo("#showDoctor_"+num+" #indent-box1_"+i);
                        $("<tr/>").attr({"class":"","id":"trDoctor_"+i}).appendTo("#showDoctor_"+num+" #tblDoctor_"+i);
                        $("<td/>").attr({"class":"","id":"tdDoctor-img_"+i}).appendTo("#showDoctor_"+num+" #trDoctor_"+i);
                        $("<a/>").attr({"class":"lightbox-image","href":"<%=request.getContextPath()%>/images/doctor/"+j.id+".jpg","rel":"prettyphoto[doctor]","title":j.name + " " + j.surname}).appendTo("#showDoctor_"+num+" #tdDoctor-img_"+i);
                        $("<img/>").attr("src","<%=request.getContextPath()%>/images/doctor/thumb/"+j.id+".jpg").appendTo("#showDoctor_"+num+" #tdDoctor-img_"+i+" a");
                        $("<td/>").attr({"class":"","id":"tdDoctor-dtl_"+i}).css({"padding":"10px 0 0 15px"}).appendTo("#showDoctor_"+num+" #trDoctor_"+i);
                        $("<em/>").text(j.name+" "+j.surname).appendTo("#showDoctor_"+num+" #tdDoctor-dtl_"+i);
                        $("<p/>").text(j.code).appendTo("#showDoctor_"+num+" #tdDoctor-dtl_"+i);
                        $("<a/>").attr({"class":"button2"}).text("More").appendTo("#showDoctor_"+num+" #tdDoctor-dtl_"+i);
                    });
                    $("a[rel^='prettyphoto']").prettyPhoto({theme:'facebook'});
                },
                error: function(){
                    alert("Error in json");
                }
            });
        };
    })(jQuery);
    $(document).ready(function() {
        $("#showDoctor").getDoctor(); // get All Doctor
        $("#formSearch").find("input, select").uniform();
        $("#btnReset").click(function(){
            $("#formSearch").get(0).reset();
            $.uniform.update(" input, select");
            return false});

        var options = {
            url: '<%=request.getContextPath()%>/Public/Doctor/formSearch_Submit',
            type: 'POST',
            dataType:  'json',
            beforeSubmit:  showRequest,  // pre-submit callback
            success:       showResponse  // post-submit callback
        };
        $("#formSearch").validate({
            submitHandler: function(form) {
                $(form).ajaxSubmit(options);
            }
        });
    });

</script>
<%-- End Form Function --%>
<!-- insert content here -->
<div class="grid_16">
    <!-- insert content here -->
        <form id="formSearch" class="form" action="" method="">
            <table class="bgTable">

                <tr >
                    <td colspan="4" class="bgheader" ><h5>Search Doctor</h5></td>
                </tr>
                <tr >
                    <td colspan="4" class="bgtop" >&nbsp;</td>
                </tr>
                <tr >
                    <td  class="bgCellNormal">Keyword  ::&nbsp;</td>
                    <td class="bgCellInput"> <input type="text" name="txtKeyword" id="txtKeyword" class="width-100" value="" /></td>
                    <td  class="bgCellNormal">&nbsp;</td>
                    <td  class="bgCellInput">&nbsp;</td>
                </tr>
                <tr>
                    <td colspan="4"  class="bgbutton">
                        <input type="submit" name="btnSubmit" id="btnSubmit" value="Search" />
                        <input type="reset" name="btnReset" id="btnReset" value="Reset" />
                </tr>
            </table>
        </form>
    <br>
    <div class="container_16" id="showDoctor">
        <div class="grid_5">
            <div id="showDoctor_1"></div>
        </div>
        <div class="grid_5">
            <div id="showDoctor_2"></div>
        </div>
        <div class="grid_5">
            <div id="showDoctor_3"></div>
        </div>
    </div>
</div>